<template>

    <div class="search-bar">
        <el-form :inline="true" >            

            <el-form-item label="名称">
                <el-input v-model="search.name" placeholder="分类名称" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="do_search">搜索</el-button>
            </el-form-item>
        </el-form> 

    </div>

    <el-table
        :data="categoryList"
        highlight-current-row
        @current-change="handleCurrentChange"
        style="width: 100%">
        <el-table-column
            property="name"
            label="分类名称"
            width="80">
        </el-table-column>
        <el-table-column
            property="sort_order"
            label="排序"
            width="">
        </el-table-column>
        <el-table-column
            property="status"
            label="状态"
            width="">
        </el-table-column>
        <el-table-column
            property=""
            label="编辑"
            width="">

            <template #default="scope">
                <el-button link type="primary" size="small"
                @click.prevent="deleteCategory(scope.row.id)" >
                    删除
                </el-button>
                <a :href="'/category/edit/'+scope.row.id">编辑</a>
            </template>
        </el-table-column>

    </el-table>

    <div class=" table-below ">
        
        <el-pagination
            @current-change="changePage"
            :page-size="per_page"
            layout="prev, pager, next" :total="total" />
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref } from 'vue';

const search:any = ref<object>({
    title:''
})
const categoryList = ref<object>()
const per_page = ref<number>(10);
const total = ref<number>();
const changePage = ref<number>(1);


const handleCurrentChange = ()=>{

}

const do_search = () => {

    getList();
}

const getList = () => {

    const url = window.VITE_URL + '/admin.category/index';
    let data = {
        name        : search.value.name
    };
    // console.log(url,data)
    axios.post( url, data ).then( res => {

        console.log( res );
        
        categoryList.value = res.data;

    });
}
getList();

// 编辑分类
const deleteCategory = ( id:any ) => {

    const url = window.VITE_URL + '/admin.category/remove';
    let data = {
        id        : id
    };
    // console.log(url,data)
    axios.post( url, data ).then( res => {

        console.log( res );
        
        categoryList.value = res.data;

    });

}
</script>